import React from "react";
import {Text, View, StyleSheet, ImageBackground, TouchableOpacity, Image, SafeAreaView, Animated, ScrollView} from "react-native";
import Header from "../components/Header";
import {COLORS, icons, SIZES} from "../constants";
import {RestaurantsI} from "../types/TabState";

const DetailPage = ({route, navigation}: any) => {
    const [scrollViewWholeHeight, setScrollViewWholeHeight] = React.useState(1);
    const [scrollViewVisibleHeight, setScrollViewVisibleHeight] = React.useState(0);

    const indicator = new Animated.Value(0);

    let restaurant: RestaurantsI = route.params.restaurant;

    const goBack = () => {
        navigation.goBack();
    };

    const goOrder = () => {
        navigation.navigate("Order");
    };

    const renderInfoSection = () => {
        return (
            <View style={{flex: 1}}>
                <ImageBackground
                    source={restaurant.img}
                    style={{
                        position: "absolute",
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 0,
                    }}
                />
                {/* Overlay */}
                <View
                    style={{
                        position: "absolute",
                        top: 0,
                        right: 0,
                        bottom: 0,
                        left: 0,
                        backgroundColor: "#00000099",
                    }}
                />
                {/* Navigation header */}
                <Header goBack={goBack} title="DETAIL" />
                {/* Cover */}
                <View style={{paddingTop: 30, alignItems: "center"}}>
                    <Image
                        source={restaurant.img}
                        style={{
                            width: 150,
                            height: 200,
                            borderRadius: 10,
                        }}
                    />
                </View>
                {/* Title */}
                <View style={{alignItems: "center", marginTop: 20}}>
                    <Text
                        style={{
                            color: "#fff",
                            fontWeight: "bold",
                            fontSize: 26,
                            letterSpacing: 5,
                        }}
                    >
                        {restaurant.title}
                    </Text>
                </View>
            </View>
        );
    };

    const renderDescription = () => {
        const indicatorSize = scrollViewWholeHeight > scrollViewVisibleHeight ? (scrollViewVisibleHeight * scrollViewVisibleHeight) / scrollViewWholeHeight : scrollViewVisibleHeight;

        const difference = scrollViewVisibleHeight > indicatorSize ? scrollViewVisibleHeight - indicatorSize : 1;

        return (
            <View style={{flex: 1, flexDirection: "row", padding: 24}}>
                {/* Custom Scrollbar */}
                <View
                    style={{
                        width: 4,
                        height: "100%",
                        backgroundColor: COLORS.gray1,
                    }}
                >
                    <Animated.View
                        style={{
                            width: 4,
                            height: indicatorSize,
                            backgroundColor: COLORS.lightGray4,
                            transform: [
                                {
                                    translateY: Animated.multiply(indicator, scrollViewVisibleHeight / scrollViewWholeHeight).interpolate({
                                        inputRange: [0, difference],
                                        outputRange: [0, difference],
                                        extrapolate: "clamp",
                                    }),
                                },
                            ],
                        }}
                    />
                </View>
                {/* Description */}
                <ScrollView
                    contentContainerStyle={{paddingLeft: 36}}
                    showsVerticalScrollIndicator={false}
                    scrollEventThrottle={16}
                    onContentSizeChange={(width, height) => {
                        setScrollViewWholeHeight(height);
                    }}
                    onLayout={({
                        nativeEvent: {
                            layout: {height},
                        },
                    }) => {
                        setScrollViewVisibleHeight(height);
                    }}
                    onScroll={Animated.event([{nativeEvent: {contentOffset: {y: indicator}}}], {useNativeDriver: false})}
                >
                    <Text
                        style={{
                            color: COLORS.white,
                            marginBottom: 15,
                            lineHeight: 30,
                            fontSize: 24,
                            fontWeight: "bold",
                        }}
                    >
                        Description
                    </Text>
                    <Text style={{color: COLORS.lightGray, lineHeight: 26, fontSize: 18}}>{restaurant.detail}</Text>
                </ScrollView>
            </View>
        );
    };

    const renderButton = () => {
        return (
            <View
                style={{
                    flexDirection: "row",
                    alignItems: "center",
                    marginBottom: 10,
                }}
            >
                {/* mark */}
                <TouchableOpacity
                    style={{
                        width: 60,
                        backgroundColor: COLORS.secondary,
                        marginLeft: SIZES.SPACE_S,
                        paddingVertical: 8,
                        borderRadius: 12,
                        alignItems: "center",
                        justifyContent: "center",
                    }}
                    onPress={() => console.log("mark")}
                >
                    <Image
                        source={icons.mark}
                        style={{
                            width: 25,
                            height: 25,
                            tintColor: COLORS.lightGray2,
                        }}
                    />
                </TouchableOpacity>
                <TouchableOpacity
                    style={{
                        flex: 1,
                        backgroundColor: COLORS.primary,
                        borderRadius: 12,
                        alignItems: "center",
                        justifyContent: "center",
                        height: 40,
                        marginRight: SIZES.SPACE_S,
                        marginLeft: SIZES.SPACE_S,
                    }}
                    onPress={goOrder}
                >
                    <Text style={{color: COLORS.white, fontSize: 18}}>Start Order</Text>
                </TouchableOpacity>
            </View>
        );
    };

    if (!restaurant) {
        return null;
    }
    return (
        <View style={styles.container}>
            <View style={{flex: 3}}>{renderInfoSection()}</View>
            <View style={{flex: 2}}>{renderDescription()}</View>
            <SafeAreaView>{renderButton()}</SafeAreaView>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {flex: 1, backgroundColor: COLORS.black},
});

export default DetailPage;
